<template>
  <div class="add_3">
    <quill-editor
      v-model="formValidate.detail"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
      class="editor">
    </quill-editor>
    <div class="box">
      <div class="previewBox" >
        <div class="title">
          <h4>详情预览</h4>
        </div>
        <div class="content" v-html="formValidate.detail"></div>
        <div class="bottom">
          <div class="block"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueQuillEditor from 'vue-quill-editor'

  // require styles
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  Vue.use(VueQuillEditor, /* { default global options } */);

  import { quillEditor } from 'vue-quill-editor'
  export default {
    name: "add_3",
    data() {
      return {
        editorOption: {
          // some quill options
        },
        formValidate: {
          detail: '',
        }
      }
    },
    components: {
      quillEditor
    },
    created() {

    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      // console.log('this is current quill instance object', this.editor)
    },
    methods: {
      // 失去焦点
      onEditorBlur(quill) {},
      // 获取焦点
      onEditorFocus(quill) {},
      // 编辑器加载完成
      onEditorReady(quill) {},
      // 内容发生改变
      onEditorChange({ quill, html, text }) {
        this.formValidate.detail = html;
      }
    }
  }
</script>

<style scoped lang="scss">
  .add_3 {
    height: 560px;
    display: flex;
    .editor{
      max-width: calc(100% - 500px);
      height: 450px;
    }
    .box{
      width: 500px;
      height: 516px;
      .previewBox{
        width: 300px;
        height: 100%;
        border: 1px solid rgba(102,102,102,0.2);
        border-radius: 50px;
        margin: auto;
        overflow: hidden;
        .title{
          text-align: center;
          height: 50px;
          position: relative;
          h4{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100px;
            height: 20px;
            border-radius: 10px;
            z-index: 0;
            font-size: 12px;
            line-height: 20px;
          }
        }
        .content{
          margin: auto;
          width: calc(100% - 20px);
          height: calc(100% - 100px);
          overflow: hidden;
          overflow-y: auto;
          padding: 10px;
        }
        .bottom{
          width: 100%;
          height: 50px;
          position: relative;
          .block{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 70px;
            height: 26px;
            border-radius: 13px;
          }
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  /deep/ .ql-toolbar.ql-snow,
  /deep/ .ql-container.ql-snow{
    border: 1px solid rgba(102,102,102,0.2);
  }
</style>
